<template>
	<view>
		<view class="wui-navbar" :style="[navbarHeightComputed,navbarBackgroundComputed,isTopFixedComputed,navbarZindexComputed]">
			<view :style="[statusBarHeightComputed]"></view>
			<view class="navbar-content" :style="[titleLineHeightComputed]">
				<view v-if="type==='normal'" class="navbar-left nav-normal" @click="backOff">
					<text class="iconfont icon-wui-back"></text>
					<text>返回</text>
				</view>
				<view v-else-if="type==='senior'" class="navbar-left">
					<view class="navbar-left-backhome" :style="[capsuleHeightComputed]">
						<view class="navbar-left-backhome-back" @click="backOff">
							<text class="iconfont icon-wui-back"></text>
						</view>
						<view class="navbar-left-backhome-home" @click="backHome">
							<text class="iconfont icon-wui-home"></text>
						</view>
					</view>
				</view>
				<view class="navbar-center">
					<slot name="navbar-center"></slot>
				</view>
				<view class="navbar-right">
					<!-- #ifndef MP -->
					<slot name="navbar-right"></slot>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<!-- 弥补定位后的高度塌陷 -->
		<view v-if="isTopFixed" :style="[navbarHeightComputed]"></view>
	</view>
</template>

<script>
	export default {
		name: 'w-navbar',
		props: {
			type: {
				type: String,
				default: 'normal'
			},
			background: {
				type: String,
				default: '#00AAFF'
			},
			isTopFixed: {
				type: Boolean,
				default: true
			},
			// 状态栏背景颜色
			statusBarBackground: {
				type: String,
				default: 'transparent'
			},
			// 标题栏背景颜色
			titleLineBackground: {
				type: String,
				default: 'transparent'
			},
		},
		data() {
			return {
				navbarHeight: 0, //总高度
				statusBarHeight: 0, //状态栏高度
				titleLineHeight: 0, // 标题栏高度
				capsuleHeight: 0, //微信小程序胶囊高度
			}
		},
		computed: {
			isTopFixedComputed() {
				if (this.isTopFixed) {
					return {
						position: 'fixed'
					}
				}
			},
			navbarHeightComputed() {
				return {
					height: this.navbarHeight + 'px'
				}
			},
			statusBarHeightComputed() {
				return {
					height: this.statusBarHeight + 'px',
					background: this.statusBarBackground
				}
			},
			titleLineHeightComputed() {
				return {
					height: this.titleLineHeight + 'px',
					background:this.titleLineBackground
				}
			},
			navbarBackgroundComputed() {
				return {
					background: this.background
				}
			},
			capsuleHeightComputed() {
				if (this.capsuleHeight) {
					return {
						height: this.capsuleHeight + 'px'
					}
				}
				return {
					height: '68%'
				}
			},
			navbarZindexComputed(){
				return{
					zIndex:this.uniWuiConfig.zIndex.navbar
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				const systemInfo = this.systemInfo
				let customBar = 0
				// #ifdef MP-WEIXIN
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar = custom.bottom + custom.top - systemInfo.statusBarHeight
				this.capsuleHeight = custom.height
				// #endif
				// #ifdef H5
				customBar = systemInfo.statusBarHeight + 44
				// #endif
				this.statusBarHeight = systemInfo.statusBarHeight
				this.navbarHeight = customBar
				this.titleLineHeight = this.navbarHeight - this.statusBarHeight
			},
			backOff() {
				uni.navigateBack({
					delta: 1
				})
			},
			backHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wui-navbar {
		top: 0;
		left: 0;
		width: 100%;

		.navbar-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;
			padding: 0 20rpx;

			.navbar-left,
			.navbar-center,
			.navbar-right {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				color: #fff;
			}

			.navbar-left {
				flex: 1;
				justify-content: flex-start;

				.navbar-left-backhome {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 180rpx;
					border: 1rpx solid rgba(255, 255, 255, .5);
					border-radius: 40rpx;
					color: #fff;

					.navbar-left-backhome-back,
					.navbar-left-backhome-home {
						width: 50%;
						display: flex;
						justify-content: center;
					}

					.navbar-left-backhome-back {
						border-right: 1rpx solid rgba(255, 255, 255, .5);
					}
				}
			}

			.nav-normal {
				.iconfont {
					margin-right: 10rpx;
				}
			}

			.navbar-center {
				flex: 2;
			}

			.navbar-right {
				flex: 1;
				justify-content: flex-end;
			}
		}
	}
</style>
